<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<view class="withdrawal-record-layout">
			<view class="withdrawal-record-group" v-for="(groupItem,index) in dataList" :key="index">
				<!-- 日期、统计 -->
				<view class="withdrawal-record-header">
					<text>{{groupItem.withdrawTime}}</text>
					<view class="withdrawal-record-header-money-box">
						<text>提现总金额：</text>
						<text>¥{{groupItem.withdrawAmount}}</text>
					</view>
				</view>
				<!-- 列表 -->
				<view class="withdrawal-record-list">
					<view class="withdrawal-record-list-cell" v-for="item in groupItem.withdrawList" :key="item.orderId" @tap="showDetail(item)">
						<view class="withdrawal-record-list-cell-top">
							<text>提现</text>
							<text>-{{item.withdrawAmount}}</text>
						</view>
						<view class="withdrawal-record-list-cell-center">
							<text>{{item.withdrawWallet}}</text>
							<text :style="{color:statusColor(item)}">{{statusText(item)}}</text>
						</view>
						<view class="withdrawal-record-list-cell-time">{{item.withdrawTime}}</view>
						<view class="line"></view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getWithdrawalRecordList } from '@/common/api/api.js'
	const dataList = ref([])
	const pagingRef = ref(null)
	// 提现详情
	const showDetail = (item) => {
		const dataStr = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/wallet/withdrawal-record/withdrawal-record-detail/withdrawal-record-detail?data=${dataStr}`
		})
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		const res = await getWithdrawalRecordList(pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	// 提现状态文字
	const statusText = (item)=>{
		if(item.status == '0'){
			return '待出款'
		}
		else if(item.status == '1'){
			return '出款成功'
		}
		else if(item.status == '2'){
			return '出款失败'
		}
		else if(item.status == '3'){
			return '出款退回'
		}
		else if(item.status == '4'){
			return '出款处理中'
		}
		else if(item.status == '5'){
			return '待审核'
		}
		return ''
	}
	// 提现状态文字颜色
	const statusColor = (item)=>{
		if(item.status == '1'){
			return '#02B555'
		}
		else if(item.status == '2' || item.status == '3'){
			return '#E12F16'
		}
		return '#060606'
	}
</script>

<style lang="scss" scoped>
	.withdrawal-record-layout {
		.withdrawal-record-header {
			background-color: $xh-bg-color;
			display: flex;
			flex-direction: column;
			padding: 30rpx;

			.withdrawal-record-header-money-box {
				display: flex;
				align-items: center;
				color: $xh-color-9;
				font-size: 24rpx;
				margin-top: 16rpx;

				text:nth-child(2) {
					color: $xh-color-3;
				}
			}
		}

		.withdrawal-record-list-cell {
			background-color: #fff;
			padding: 30rpx;
			position: relative;

			.withdrawal-record-list-cell-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text:nth-child(2) {
					color: $xh-orange-color;
				}
			}

			.withdrawal-record-list-cell-center {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 12rpx 0;
				font-size: 24rpx;

				text:nth-child(2) {
					color: $xh-red-color;
				}
			}

			.withdrawal-record-list-cell-time {
				font-size: 24rpx;
				color: $xh-color-9;
			}
		}
	}
</style>